<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#loading").hide();
		$("#login-form").submit(function(e) {
			$(document).ajaxStart(function() {
				$("#loading").show();
			});
			$(document).ajaxStop(function() {
				$("#loading").hide();
			});
			e.preventDefault();
			var userName = $("#user-name").val();
			$.ajax({
				type : "post",
				url : "SimpleServlet.do",
				data : {
					"userName" : userName
				},
				timeout : 2000,
				error : function() {
					$("#result").text("Hata");
				},
				success : function(result) {
					$("#result").text(result);
				}
			});
		});
	});
</script>
<title>Insert title here</title>
</head>
<body>

	<form id="login-form">
		<table>
			<tr>
				<td><label for="user-name">User Name</label></td>
				<td><input type="text" id="user-name" name="userName"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Send"></td>
			</tr>
			<tr>
				<td><img id="loading" alt="loading" src="img/circle.gif"
					width="32" height="32"></td>
				<td><div id="result">Result</div></td>
			</tr>
		</table>
	</form>

</body>
</html>